<template>
  <div>
      <basic-container>
          <navigation :sign="{a:false,b:false,c:true,d:false,e:false}"></navigation>
          <div class="boxsty zhiBiao">
               <div class="flex justifyContentSpaceBetween">
                <div class="tabletext">奖金审核</div>
                <div class="tablelink">
                    <span
                    style="float: right; cursor: pointer"
                    @click="searchchangeadvanced"
                    >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
                        <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"/>
                    </span>
                </div>
                </div>
                <div v-show="searchadvanced">
                    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="form-inline">
                        <el-form-item label="奖金名称">
                            <el-input v-model="dataForm.jjmc" placeholder="奖金名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="负责单位">
                            <!-- <el-select v-model="dataForm.deptid" placeholder="请选择负责部门" class="xiaLa mr20" @change="switchDepartment">
                            <el-option v-for="(item,index) in bmData" :key="index" :label="item.deptName"
                                        :value="item.deptId"></el-option>
                            </el-select> -->
                            <el-input v-model="dataForm.deptname" placeholder="负责单位" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="奖金项名称">
                            <el-input v-model="dataForm.jjxmc" placeholder="奖金项名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="发起人">
                            <el-input v-model="dataForm.userName" placeholder="发起人" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="marginLeft" plain @click="getDataList(1)">检索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="margin-bottom:10px;overflow:hidden">
                    <div class="pull-right">
                        <el-button type="primary"  plain @click="shenpi('通过')">通过</el-button>
                        <el-button type="primary"  plain @click="shenpi('驳回')">驳回</el-button>
                    </div>
                </div>
                <div>
                    <el-table :data="dataList" 
                    :highlight-current-row="true" 
                   
                    ref="zhuTable"
                    border>
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <div style="width:90%;margin-left:5%;overflow:hidden">
                                <el-table :data="scope.row.children" style="width:100%;" label-position="center" inline class="demo-table-expand">
                                  <el-table-column label="奖金名称" prop="jjmc" align="center" width="200px" show-overflow-tooltip></el-table-column>
                                  <el-table-column label="发放部门" prop="jjdeptname" align="center" min-width="200px" show-overflow-tooltip></el-table-column>
                                  <el-table-column label="奖金项" prop="jjxmc" align="center" width="200px" show-overflow-tooltip></el-table-column>
                                  <el-table-column label="分配额度" prop="fped" align="center" width="200px" show-overflow-tooltip></el-table-column>
                                  <el-table-column label="发起人" prop="userName" align="center" width="200px" show-overflow-tooltip></el-table-column>
                                  <el-table-column label="奖金类别" prop="type" align="center" width="200px" show-overflow-tooltip>
                                      <template slot-scope="scope1">
                                        <span v-if="scope1.row.type=='JJ_FP'">奖金审核</span>
                                        <span v-else>发放审核</span>
                                    </template>
                                  </el-table-column>
                                </el-table>
                                </div>
                            </template>
                    </el-table-column>
                     <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="奖金名称" prop="jjmc" align="center" min-width="200px" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-link>
                            <span @click="handleDialog(scope.row,'待办','审核')">{{scope.row.jjmc}}</span>
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="发放部门" prop="jjdeptname" align="center" width="200px" show-overflow-tooltip></el-table-column>
                    <el-table-column label="奖金总额" prop="jjze" align="center" width="200px">
                        <template slot-scope="scope">
                            <el-popover
                                placement="top-start"
                                width="350"
                                trigger="hover"
                               >
                                <el-table :data="scope.row.listxf">
                                  <el-table-column label="奖金项名称" min-width="200" prop="jjxmc"></el-table-column>
                                  <el-table-column label="余额" min-width="100"  prop="ye"></el-table-column>
                                </el-table>
                                <span slot="reference">{{scope.row.jjze}}</span>
                            </el-popover>
                            
                        </template>
                    </el-table-column>
                    <el-table-column label="分配额度" prop="fped" align="center" width="200px" show-overflow-tooltip></el-table-column>
                    <el-table-column label="剩余奖金" prop="jjye" align="center" width="200px" show-overflow-tooltip></el-table-column>
                    <el-table-column label="发起人" prop="userName" align="center" width="200px" show-overflow-tooltip></el-table-column>
                    <el-table-column label="奖金类别" prop="type" align="center" width="200px" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.type=='JJ_FP'">奖金审核</span>
                            <span v-else>发放审核</span>
                        </template>
                    </el-table-column>
                    </el-table>
                    <!-- <el-table :data="dataList" border>
                        <el-table-column label="流程类别" prop="type" align="center" min-width="120px">
                            <template slot-scope="scope">
                            <span v-if="scope.row.type=='JJ_FP'">奖金审核</span>
                            <span v-else>发放审核</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="当前节点" prop="taskName" align="center" width="200px" show-overflow-tooltip></el-table-column>
                        <el-table-column label="发起人" prop="userName" align="center" width="80px" show-overflow-tooltip></el-table-column>
                        <el-table-column label="任务数量" prop="cou" align="center" width="90px" show-overflow-tooltip>
                            <template slot-scope="scope">
                            <span v-if="scope.row.cou == 0">1</span>
                            <span v-else>{{scope.row.cou}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="接收时间" prop="time" align="center" width="150px" show-overflow-tooltip>
                            <template slot-scope="scope">{{$moment(scope.row.time).format("YYYY-MM-DD HH:mm")}}</template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" min-width="100">
                            <template slot-scope="scope">
                            <el-button type="primary" plain @click="handleDialog(scope.row,'待办')">审批办理</el-button>
                            </template>
                        </el-table-column>
                    </el-table>   -->
                    <div class="avue-crud__pagination">
                    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                                    :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                                    layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                    </div>
                </div>
          </div>
          <jiangjinWork ref="jiangjinWork" @jiangChild='jiangChild'></jiangjinWork>
          <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="30%"
            >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="意见">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                
                <el-button type="primary" @click="putShen(zhuData,dialogTitle)">确 定</el-button>
                <el-button @click="closeD">取 消</el-button>
            </span>
        </el-dialog>
      </basic-container>
  </div>
</template>

<script>
import jiangjinWork from '@/views/workflow/apply/jiangjinWork'
import {todoAndtodo4Jj,submitJJTaskList} from "@/api/workflow/wfywmain";

import {
  getJiangJinBm
} from '@/api/admin/dept'
export default {
    components: {
        jiangjinWork
    },
    data(){
        return{
            searchheight: "0",
            searchadvanced: true,
            dataForm:{},
            dataList:[],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            bmData: [], //负责部门
            ymLoad:false,
            dialogTitle:"",
            dialogVisible:false,
            form:{
                desc:""
            },
            zhuData:[]
        }
    },
    created(){
        if(this.$route.query.r){
            this.handleDialog(this.$route.query.r,this.$route.query.text,'审核')
        }
        this.getDataList(); 
        //this.getJiangJinJg()
    },
    methods:{
        getDataList(){
            todoAndtodo4Jj(
                Object.assign(
                {
                    current: this.pageIndex,
                    size: this.pageSize,
                },
                this.dataForm,
                {key:'JJ_FP,JJ_FF'}
                )
            ).then(res=>{
                this.dataList=res.data.data.records
                this.totalPage=res.data.data.total
            })
        },
        closeD(){
            this.dialogVisible=false
            this.zhuData=[]
            this.dialogTitle=""
            this.form={
                desc:""
            }
        },
        //通过与驳回
        shenpi(type){
            this.zhuData=this.$refs.zhuTable.selection;
            if(this.zhuData.length==0){
                this.$message.closeAll()
                this.$message.warning('请选择要'+type+'的数据！')
                return false;
            }
            if(this.zhuData.length>0){
                if(type=='通过'){
                     this.putShen(this.zhuData,type)   
                }else{
                    this.dialogTitle=type
                    this.dialogVisible=true
                }
                
            }
        },
        putShen(data,type){
            var that=this
            this.$confirm('确定要批量'+type+', 是否继续?', '提示',  {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var list=[],obj={}
                        data.forEach(item => {
                            obj={
                                fpId: item.fpId,
                                taskId: item.taskId,
                                processId:item.processInstanceId,
                                taskFlag: type,
                                type: item.type,
                                comment:this.form.desc
                            }
                            list.push(obj)
                        });
                        
                        this.putsubmitJJTaskList(list)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

        },
        putsubmitJJTaskList(list){
            submitJJTaskList(list).then(res=>{
                if (res.data.code==0) {
                this.$message.success('提交成功!')
                this.closeD()
                } else {
                this.$message.success('提交失败!')
                }  
                this.getDataList(); 
            })
        },
        //管理部门切换
        switchDepartment(deptid) {
            for (let a in this.bmData) {
                if (this.bmData[a].deptId == deptid) {
                this.$set(this.dataForm,'deptid',this.bmData[a].deptId)
                this.$set(this.dataForm,'deptname',this.bmData[a].deptName)
                this.getDataList();
                break;
                }
            }
        },
        //获取奖金管理人机构
        getJiangJinJg() {
        getJiangJinBm().then(res => {
            if (res.data.data != null && res.data.data.length > 0) {
            this.bmData.push(res.data.data)
            this.bmData = res.data.data
            this.ymLoad = false;
            this.$set(this.dataForm,'deptid',res.data.data[0].deptId)
            this.$set(this.dataForm,'deptname',res.data.data[0].name)
            this.getDataList();
            } else {
            this.$notify.closeAll();
            this.ymLoad = true;
            //this.$notify.error("没有相关负责部门")
            //this.deptName = "无相关负责部门";
            this.getDataList();
            }
        }).catch(err => {
            this.ymLoad = true;
        });
        },
        handleDialog(r, text,flagText) {
            this.$nextTick(() => {
                if(r.fpId){
                    this.$refs.jiangjinWork.open(r.fpId, r.taskId, r['processInstanceId'], r.type, text,flagText)
                }
            })
        },
        // 每页数
        sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
        },
        jiangChild(result) {
            this.getDataList();
            this.$emit('jiangjinTdChild')
        },
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if (this.searchadvanced) {
                this.searchheight = "50";
            }
        },
    }
}
</script>

<style  lang="scss" scoped>
/*选中行颜色*/
.zhiBiao /deep/ .el-table__body tr.current-row td, .el-table__body tr.current-row > td {
  background-color: #ffffb3 !important;
}
</style>